<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10" style="height:100%;margin:0px">
      <el-col :span="24">
        <div class="table-box" >
          <div class="search" ref="search">
            <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">
              <el-form-item prop="type">
                <el-select filterable clearable v-model="searchForm.type" placeholder="全部任务主题">
                  <el-option label="发货提醒" value="1" ></el-option>
                  <el-option label="退货/售后提醒" value="2" ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="time">
                <el-date-picker v-model="time" type="daterange" align="right" unlink-panels range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
              <el-form-item class="clearfix">
                <el-button type="primary" @click="handleSearch()" icon="el-icon-search">查询</el-button>
                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="actionBtn" ref="actionBtn">
            <div class="actionBtnLeft">
              <el-radio-group v-model="searchForm.status" size="small" @change="handleSearch">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button :label="item.id" v-for="item in readStatusList">{{item.name}}</el-radio-button>
              </el-radio-group>
            </div>
            <div class="actionBtnRight">
                <MyRefresh></MyRefresh>
                <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
            </div>
          </div>

          <div class="table" ref="table">
            <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight" stripe v-loading="loading">
             <!-- <el-table-column type="selection" width="55" ></el-table-column> -->
              <el-table-column prop="taskId" label="编号" v-if="!hideTableColumn.includes('number')" width="140"></el-table-column>
              <el-table-column prop="title" label="任务主题" v-if="!hideTableColumn.includes('title')" align="center" width="200"></el-table-column>
              <el-table-column prop="content" label="任务内容" v-if="!hideTableColumn.includes('content')"  :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="userName" label="用户名或ID(手机号)" v-if="!hideTableColumn.includes('phone')" align="center" width="150">
                <template slot-scope="scope">
                  <div>{{scope.row.insertName}}</div>
                  <div>{{ phoneSplit(scope.row.insertTelephone) }}</div>
                </template>
              </el-table-column>
              <el-table-column  label="时间" v-if="!hideTableColumn.includes('time')" align="center" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.insertDate) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="状态" v-if="!hideTableColumn.includes('status')" align="center" width="110">
                <template #default="scope">
                    <el-tag type="primary" v-if="scope.row.status=='1'">未查看</el-tag>
                    <el-tag type="success" v-else-if="scope.row.status=='2'">已查看</el-tag>
                </template>
              </el-table-column>
             <el-table-column prop="name" label="操作"  width="120" align="center">
                <template #default="scope">
                    <el-button
                      type="text"
                      icon="el-icon-s-order"
                      @click="handleGoTaskDetail(scope.row)"
                    >查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page" ref="page">
            <MyPagination
               :total="total"
               :page.sync="searchForm.pageNum"
               :limit.sync="searchForm.pageSize"
               @pagination="dataInfo"
             />
          </div>
        </div>
      </el-col>

    </el-row>



  </div>
</template>

<script>
  import { remindList } from '@/api/getData';
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        readStatusList:[{id:'1',name:'未查看'},{id:'2',name:'已查看'}],
        tableColumn:[{/*自定义表格列*/
            name:'编号',
            value:'number'
        },{
            name:'任务主题',
            value:'title'
        },{
            name:'任务内容',
            value:'content'
        },{
            name:'用户名或ID(手机号)',
            value:'phone'
        },{
            name:'时间',
            value:'time'
        },{
            name:'状态',
            value:'status'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        searchForm: {
          status:'',
          type:'',
          pageNum: 1,
          pageSize: 20,
        },
        time: [],
        tableHeight:0,//table 高度
        dataList:[],
        total: 0,
        multipleSelection: '',
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      if(this.$route.query.readStatus){
        this.searchForm.status = this.$route.query.readStatus;
      }
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight- this.$refs.page.offsetHeight - 35;
      })
    },
    methods: {
      /** 重置按钮操作 */
      resetQuery() {
        this.time = [];
        this.resetForm("searchForm");
        this.dataInfo();
      },
      handleGoTaskDetail(row){
          this.$router.push({path:'/order/orderDetail',query:{id:row.relationId}});
      },
      phoneSplit(phoneText) {
          if(phoneText){
            var phoneHead = phoneText.substr(0,3);
            var phoneLeng = phoneText.substr(phoneText.length-4,4);
           return phoneHead + '****' + phoneLeng;
          }
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.time);
          this.loading = true;
          const result = await remindList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleSearch() {
        this.page = 1;
        this.dataInfo();
      },
    }
  }
</script>

<style scoped lang="scss">
  .index-box{
    padding:0px!important;
    margin-left:0px;
  }
  .tree-box /deep/ .el-tree-node{
     background: #D8E4DD;
  }
  .tree-box> /deep/ .el-tree>.el-tree-node{
    padding:10px;
  }
  .tree-box> /deep/ .el-tree .is-current{
    background:#fff;
  }
  .table-box{
    padding:15px
  }
  .down{
    color: #909399;
    cursor: pointer;
    text-decoration:underline;
  }
  .down:hover{
    color: #a6a9ad;
  }
  .up{
    color:#61997A;
    cursor: pointer;
    text-decoration:underline;
  }
  .up:hover{
    color:#81ad95;
  }
</style>
